<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录界面</title>
    <link rel="stylesheet" href="./css/style.css">
</head>

<body>
    <div class="login">
        <div class="login-form">
            <h2>后台管理中心</h2>
            <form>
                <div class="item">
                    <input type="text" name="username" placeholder="登录账号" />
                </div>
                <div class="item">
                    <input type="text" name="password" placeholder="登录密码" />
                </div>
                <div class="btn">
                    <input id="login" type="button" value="登录" />
                    <input id="register" type="button" value="注册" />
                </div>
            </form>
        </div>
    </div>

    <script>
        const registerBtnEle = document.querySelector('#register')
        registerBtnEle.addEventListener('click', function () {
            location.href = './register.html' // 跳转到指定页面
        })
        const userNameInputEle = document.querySelector('input[name="username"]')
        const passwordInputEle = document.querySelector('input[name="password"]')
        const checkUserName = function () {
            // 判断有无P节点，有则移除
            if (userNameInputEle.nextElementSibling && userNameInputEle.nextElementSibling.nodeName == 'P') {
                userNameInputEle.nextElementSibling.remove() // 移除P节点
            }

            let username = userNameInputEle.value // 获取账号
            // 非空判断
            if (username == '') {
                // 添加P节点
                let pEle = document.createElement('p')
                pEle.innerHTML = '账号不能为空'
                pEle.style.color = 'red'
                pEle.style.fontSize = '14px'
                userNameInputEle.parentElement.appendChild(pEle)
                return false
            }

            return true
        }
        userNameInputEle.addEventListener('blur', function () {
            checkUserName()
        })
        const checkPassword = function () {
            // 判断有无P节点，有则移除
            if (passwordInputEle.nextElementSibling && passwordInputEle.nextElementSibling.nodeName == 'P') {
                passwordInputEle.nextElementSibling.remove() // 移除P节点
            }

            let password = passwordInputEle.value // 获取账号
            // 非空判断
            if (password == '') {
                // 添加P节点
                let pEle = document.createElement('p')
                pEle.innerHTML = '密码不能为空'
                pEle.style.color = 'red'
                pEle.style.fontSize = '14px'
                passwordInputEle.parentElement.appendChild(pEle)
                return false
            }
            return true
        }
        passwordInputEle.addEventListener('blur', function () {
            checkPassword()
        })

        /**
         * 设置cookie
         * **/
        function setCookie(cname, cvalue, exdays) {
            var d = new Date();
            d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
            var expires = "expires=" + d.toGMTString();
            document.cookie = cname + "=" + cvalue + "; " + expires;
        }
        const loginBtn = document.querySelector('#login')
        loginBtn.onclick = function () {
            // 非空验证
            let isCheckUser = checkUserName()
            if (isCheckUser == false) {
                return
            }

            let isCheckPassword = checkPassword()
            if (isCheckPassword == false) {
                return
            }

            // 账号和密码验证
            let userName = userNameInputEle.value // 账号
            let password = passwordInputEle.value // 密码
            let xmlHttp = new window.XMLHttpRequest();
            xmlHttp.open('POST', 'http://localhost:8089/api/login', true);
            //xmlHttp.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
            xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xmlHttp.send(`username=${userName}&password=${password}`);
            xmlHttp.onreadystatechange = function () {
                if (xmlHttp.readyState == 4) {
                    if (xmlHttp.status == 200) {
                        let result = JSON.parse(xmlHttp.responseText);
                        if (result.resultCode == 1) {
                            window.alert('登录成功');
                            //console.log(result.resultInfo.username);
                            setCookie('username',result.resultInfo.username , 1)
                            window.location.href = './index.html';
                        }
                    }
                }
            }
            // localstorage存储的用户信息
            // let userStr = localStorage.getItem('USER')
            // let user = JSON.parse(userStr) // json字符串=>json对象
            // if (user.username != userName) {
            //     alert('账号出错!')
            //     return
            // }
            // if (user.password != password) {
            //     alert('密码出错!')
            //     return
            // }

            // alert('登录成功')


            // let loginGo = () => {
            //     for (let i = 0; i < userListArr.length; i++) {
            //         if (userListArr[i].username == userName && userListArr[i].password == password) {
            //             alert('登录成功！')
            //             location.href = 'http://www.baidu.com'
            //             return
            //         }
            //     }
            //     alert('用户名或密码错误！')

            // }
            // loginGo()


        }

        // window.onkeydown = function (e) {
        //         e = e || window.event
        //         let code = e.keyCode || e.which
        //         console.log(code)
        //     }
    </script>
</body>

</html>